<template>
<div class="login" v-loading="loading">
    <div class="box">
      <el-form :model="userInfo" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="userInfo.telephone"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userInfo.password"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-row type="flex" justify="space-between">
            <el-col>
              <el-checkbox v-model="checked">记住密码</el-checkbox>
            </el-col>
            <el-col align="right">
              <router-link to="/">忘记密码？</router-link>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     id="TencentCaptcha"
                     data-appid="2058774045"
                     data-cbfn="callbackName"
                     style="width: 100%"> 登录 </el-button>
        </el-form-item>
      </el-form>
    </div>
</div>
</template>

<script>
const Base64 = require('js-base64').Base64;

export default {
  name: "login",
  data() {
    return {
      loading:false,
      userInfo:{
        telephone:'',
        password:""
      },
      checked:false
    }
  },
  created() {
    window.callbackName = this.login
    this.checked = JSON.parse(localStorage.getItem('p'))
    if (this.checked){
      this.userInfo = {
        telephone:Base64.decode(localStorage.getItem(Base64.encode('telephone'))),
        password:Base64.decode(localStorage.getItem(Base64.encode('password')))
      }
    }
  },
  methods: {
    async login(res){
      if (res.ret===0) {
        this.loading = true
        await this.$store.dispatch('login',
            this.userInfo)
        await this.$router.push(`/home/usercenter`)
        localStorage.setItem('p', this.checked)
        if (this.checked) {
          // 存之前加密
          const tv = Base64.encode(this.userInfo.telephone)
          const pv = Base64.encode(this.userInfo.password)
          const ti = Base64.encode('telephone')
          const pi = Base64.encode('password')
          localStorage.setItem(ti, tv)
          localStorage.setItem(pi, pv)
        }
      }
    }
  }
}
</script>

<style scoped>
.login{
  width: 100%;
  height: 100vh;
  /*background-color: #555;*/
  background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
}
.box{
  padding: 20px;
  width: 500px;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
  top: 200px;
}
</style>
